<template>
    <div class="container bg-gray">
        <mt-popup
                v-model="selectCarBrand"
                position="right"
                class="brandpop"
                popup-transition="popup-fade">
                <mt-index-list>
                    <mt-index-section :index="section" v-for="(brands,section) in brandList" :key="section">
                        <div @click="onSelectBrand(brand)" v-for="brand in brands" :key="brand.id">
                            <mt-cell class="mt-cell-cc"  :title="brand.brandName"></mt-cell>
                        </div>
                    </mt-index-section>
                </mt-index-list>
        </mt-popup>
        <mt-popup v-model="isShowingShortName" position="center" popup-transition="popup-fade">
            <div class="tags">
                <div class="tag" @click="selectProvinceShortName(tag)" v-for="tag in provinceShortName" :key="tag">
                    {{tag}}
                </div>
            </div>
        </mt-popup>
        <div class="form-items fz30">
            <div class="form-item flex border-b" @click="showCarBand">
                <div class="txt333">
                    品牌：
                </div>
                <div class="flex-con txt999">
                    {{formData.carBrandName||'请选择品牌'}}
                </div>
                <img src="../../assets/imgs/other/gt@2x.png" alt="" class="gt"/>
            </div>
            <label class="form-item flex border-b">
                <div class="txt333">
                 车型：
                </div>
                <div class="flex-con txt999">
                    <input type="text" placeholder="请输入车型，如：A6、奥德赛" v-model="formData.carSerialName" class="full-txt-input">
                </div>
            </label>
            <label class="form-item flex border-b">
                <div class="txt333">
                 车价(万元)：
                </div>
                <div class="flex-con txt999">
                    <input type="number" placeholder="请输入车价，如：10.7" v-model="formData.price" class="full-txt-input">
                </div>
            </label>

            <div class="form-item flex border-b">
                <div class="txt333">
                 排量(L/T)：
                </div>
                <div class="flex-con txt999">
                     <input type="number" placeholder="请输入排量，如：1.6T" v-model="formData.displacement1" class="full-txt-input"/>
                </div>
                <div class="unit rel">
                    {{formData.unit||'单位'}}
                    <img src="../../assets/imgs/other/down@2x.png" alt="" class="down-icon">
                    <select class="full-opacity" v-model="formData.unit">
                        <option disabled>单位</option>
                        <option value="L">L</option>
                        <option value="T">T</option>
                    </select>
                </div>
            </div>

            <div class="form-item flex border-b">
                <div class="txt333">
               汽油类型：
                </div>
                <div class="flex-con txt999">                    
                    {{oilTypes[formData.oilType]||'请选择'}}
                    <select class="full-opacity" v-model="formData.oilType">
                        <option disabled>汽油类型</option>
                        <option :value="index" v-for="(type,index) in oilTypes" :key="index">{{type}}</option>
                    </select>
                </div>
                  <img src="../../assets/imgs/other/gt@2x.png" alt="" class="gt"/>
            </div>
            <div class="form-item flex border-b">
                <div class="txt333">
               车牌号：
                </div>
               <div class="unit" @click.stop="showProvinceShortNameSelect">
                    {{formData.PLATE_NUMBER_1||'粤'}}
                    <img src="../../assets/imgs/other/down@2x.png" alt="" class="down-icon">
                </div>
                <label class="flex-con" style="padding-left:0.2667rem;padding-right:0.3rem;" >
                    <input type="text" placeholder="请输入您的车牌号" v-model="formData.PLATE_NUMBER_2">
                </label>
            </div>
            <div class="form-item flex border-b">
                <div class="txt333">
               车辆类型：
                </div>
               <div class="flex-con">                    
                    {{carTypes[formData.plateNumberType]||'请选择'}}
                    <select class="full-opacity" v-model="formData.plateNumberType">
                        <option disabled>车辆类型：</option>
                        <option :value="index" v-for="(type,index) in carTypes" :key="index">{{type}}</option>
                    </select>
                </div>
               <img src="../../assets/imgs/other/gt@2x.png" alt="" class="gt"/>
            </div>
            <label class="form-item flex border-b">
                <div class="txt333">
               车辆识别代号：
                </div>
               <div class="flex-con">
                    <input type="text" placeholder="只需后六位" v-model="formData.carFrameNum">
                </div>
                <div>
                    <img src="../../assets/imgs/other/question@2x.png" alt="" class="question-icon" @click="showcarlicense=true">
                </div>
            </label>
            <label class="form-item flex border-b">
                <div class="txt333">
                    发动机号码：
                </div>
               <div class="flex-con">
                    <input type="text" placeholder="只需后六位" v-model="formData.engineNumber">
                </div>
                <div>
                    <img src="../../assets/imgs/other/question@2x.png" alt="" class="question-icon" @click="showcarlicense=true">
                </div>
            </label>
        </div>
        <div class="btn-areas">
            <div class="btn-submit" @click="doSubmit">保存</div>
        </div>
        <div class="carlicense-masker" v-if="showcarlicense" @click="showcarlicense=false">
            <img src="../../assets/icons/carlicense.jpeg" class="carlicense-img" alt="">
        </div>
    </div>
</template>
<script>
import { isVehicleNumber } from "../../utils/common";
/**
 *  "05": "银行卡",
  "03": "中油BP畅行卡",
  "08": "中油BP畅行车主卡",
  "06": "其他",
 */
import { oilTypes, carTypes, provinceShortName } from "../../config/constants";
export default {
  data() {
    return {
      showcarlicense: false,
      selectCarBrand: false,
      isShowingShortName: false,
      brandList: [],
      formData: {
        PLATE_NUMBER_1: "",
        carBrandName: ""
      },
      oilTypes,
      provinceShortName,
      carTypes
    };
  },
  created() {
    let id = this.$route.query.id;
    if (id) {
      this.showLoading();
      this.$get("/api/user/get_car", { id })
        .then(data => {
          //this.formData.displacement = this.formData.displacement1 + this.formData.unit;
          if (data.displacement) {
            let len = data.displacement.length;
            data.displacement1 = data.displacement.substr(0, len - 1);
            data.unit = data.displacement.substr(-1);
          }
          //PLATE_NUMBER_1    PLATE_NUMBER_2

          if (data.plateNumber) {
            data.PLATE_NUMBER_1 = data.plateNumber.substr(0, 1);
            data.PLATE_NUMBER_2 = data.plateNumber.substr(1);
          }
          this.formData = data;
          this.hideLoading();
        })
        .catch(_ => {
          this.hideLoading();
        });
    }
    this.$get("/api/base_data/car_brand").then(data => {
      let rt = {};
      for (let i = 0; i < data.length; i++) {
        rt[data[i].brandAlpha] = rt[data[i].brandAlpha] || [];
        rt[data[i].brandAlpha].push(data[i]);
      }
      this.brandList = rt;
    });
  },
  methods: {
    onSelectBrand(brand) {
      this.formData.carBrandId = brand.id;
      this.formData.carBrandName = brand.brandName;
      this.formData.logo = brand.logo;
      this.selectCarBrand = false;
    },
    selectProvinceShortName(tag) {
      this.formData.PLATE_NUMBER_1 = tag;
      this.isShowingShortName = false;
    },
    showProvinceShortNameSelect() {
      this.isShowingShortName = true;
    },
    doSubmit() {
      this.formData.plateNumber =
        (this.formData.PLATE_NUMBER_1 || "粤") + this.formData.PLATE_NUMBER_2;

      if (!this.formData.carBrandId) {
        this.$toast("请选择车品牌");
        return;
      }
      if (!this.formData.carSerialName) {
        this.$toast("请输入车型");
        return;
      }
      if (!this.formData.price) {
        this.$toast("请输入车价");
        return;
      }
      if (!this.formData.displacement1) {
        this.$toast("请输入排量");
        return;
      }
      if (!this.formData.unit) {
        this.$toast("请选择排量单位");
        return;
      }
      if (this.formData.oilType === "") {
        this.$toast("请选择汽油类型");
        return;
      }
      if (!this.formData.PLATE_NUMBER_2) {
        this.$toast("请输入您的车牌号");
        return;
      }
      if (!this.formData.plateNumberType) {
        this.$toast("请选择车辆类型");
        return;
      }
      if (!this.formData.carFrameNum) {
        this.$toast("请输入车辆识别代号");
        return;
      }
      if (!this.formData.engineNumber) {
        this.$toast("请输入发动机号码");
        return;
      }
      if (!isVehicleNumber(this.formData.plateNumber)) {
        this.$toast("请输入正确的车牌号");
        return;
      }
      this.formData.displacement =
        this.formData.displacement1 + this.formData.unit;
      this.showLoading();
      this.$post("/api/user/saveCar", this.formData)
        .then(el => {
          this.hideLoading();
          this.$toast("保存成功");
          this.$router.go(-1);
        })
        .catch(_ => {
          this.hideLoading();
        });
    },
    showCarBand() {
      this.selectCarBrand = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.brandpop {
  width: 8rem;
}
.carlicense-masker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  img {
    width: 8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }
}

.mt-cell-cc /deep/ .mint-cell-value {
  width: auto;
}

.btn-areas {
  padding-top: 0.7867rem;
  text-align: center;
  .btn-submit {
    display: inline-block;
    width: 8.4667rem;
    height: 1.0667rem;
    line-height: 1.0667rem;
    color: white;
    font-size: 0.4267rem;
    background-image: url("../../assets/imgs/other/btn.png");
    background-size: 100% 100%;
    background-position: left top;
  }
}
.tags {
  width: 8.72rem;
  padding: 0.32rem 0.32rem 0 0.32rem;
  box-sizing: border-box;

  overflow: hidden;
  background-color: #ffffff;
  .tag {
    width: 1.3333rem;
    height: 0.7733rem;
    line-height: 0.7733rem;
    background-color: #9b9b9b;
    float: left;
    border-radius: 0.1467rem;
    font-size: 0.4rem;
    color: #ffffff;
    text-align: center;
    margin-bottom: 0.3067rem;
    margin-right: 0.3333rem;
  }
  .tag:nth-child(5n) {
    margin-right: 0;
  }
}
.question-icon {
  width: 0.6667rem;
  height: 0.6667rem;
}
.form-items {
  padding-top: 0.4rem;

  .form-item {
    padding: 0.4133rem 0.4667rem;
    background-color: #fff;
    .txt333 {
      width: 3.1867rem;
    }
    input {
      width: 100%;
      border: none;
      outline: none;
    }
  }
}
.down-icon {
  width: 0.28rem;
  height: 0.1467rem;
}
.unit {
  width: 1.48rem;
  height: 0.84rem;
  line-height: 0.84rem;
  font-size: 0.4rem;
  text-align: center;
  background-color: #e2e2e2;
  border-radius: 0.0933rem;
}
</style>
